/**
 * 修改部门
 */
<template >
<vp-dialog ref="editDialogRef" :span="1">
    <template #title>
        <vp-label v-if="type == 'add'" zh="新增" en="Add" align="left"/>
        <vp-label v-else zh="修改" en="Edit" align="left"/>
    </template>
    <el-form label-suffix=":" v-loading="loading"  :model="formData" :rules="formRules" ref="formRef" label-width="120px">
        <el-row>
            <vp-col :span="1">
                <el-form-item  prop="dprtcode">
                    <template #label><vp-label zh="部门编码" en="Dprt Code"/></template>
                    <el-input v-model="formData.dprtcode" v-trim  maxlength="50"></el-input>
                </el-form-item>
            </vp-col>
            <vp-col :span="1">
                <el-form-item prop="dprtname">
                    <template #label><vp-label zh="部门名称" en="Dprt Name"/></template>
                    <el-input v-model="formData.dprtname" v-trim  maxlength="100"></el-input>
                </el-form-item>
            </vp-col>
            <vp-col :span="1">
                <el-form-item prop="dprttype" >
                    <template #label><vp-label zh="类型" en="Type"/></template>
                    <el-select v-model="formData.dprttype" class="w100">
                            <el-option  label="机构/Org" value="1"><vp-label zh="机构" en="Org"/></el-option>
                            <el-option label="部门/Dept" value="2"><vp-label zh="部门" en="Dept"/></el-option>
                        </el-select>
                </el-form-item>
            </vp-col>
            <vp-col :span="1">
                <el-form-item prop="fzrid" >
                    <template #label><vp-label zh="负责人" en="Manager"/></template>
                    <el-input readonly v-model="formData.fzrxm">
                        <template #append>
                            <el-button @click="handleSearchUser"><SvgIcon name="ele-Search"/></el-button>
                        </template>
                    </el-input>
                </el-form-item>
            </vp-col>
            <vp-col :span="1">
                <el-form-item  prop="pxh">
                    <template #label><vp-label zh="排序" en="Sort"/></template>
                    <el-input v-trim maxlength="5" v-model="formData.pxh"></el-input>
                </el-form-item>
            </vp-col>
        </el-row>

        <!-- 人员选择页面 -->
        <VpUserDialog ref="vpUserDialogRef"></VpUserDialog>
    </el-form>
    <template #footer>
        <vp-btn-confirm :loading="saveLoading" @click="handleSave"/>
    </template>
</vp-dialog>
</template>
<script setup lang="ts" name="editDepartment">
import { defineAsyncComponent, ref } from 'vue';
import request from '/@/utils/request';
import validateUtils from '/@/utils/validateUtils';

const VpUserDialog = defineAsyncComponent(() => import('/@/components/vp/user/VpUserDialog.vue'));

const emits = defineEmits(['formSubmited']);
    const formData = ref({
        id:"",
        dprtcode:"",
        dprtname:"",
        parentid:"",
        dprttype:"2",
        pxh: null,
        fzrid: "",
        fzrxm: "",
    });
    const formRules = {
        dprtcode:[ 
            validateUtils.notNull,
            validateUtils.notChinese
        ],
        dprtname: [
            validateUtils.notNull
        ]
    }


    const loading = ref(false);
    const saveLoading = ref(false);
    const editDialogRef = ref();
    const formRef = ref();
    const type = ref('add');

    const initForm = ()=>{
        formData.value = {
            id:"",
            dprtcode:"",
            dprtname:"",
            parentid:"",
            dprttype:"2",
            pxh: null,
            fzrid: "",
            fzrxm: "",
        }
    }
    const handleSave = () => {
        if(loading.value){
            return;
        }
        saveLoading.value = true;
        formRef.value.validate((valid: Boolean)=>{
            if(valid){
                request.post("/system/department/"+type.value, {
                    ...formData.value
                }).then(()=>{
                    emits("formSubmited");
                    editDialogRef.value.handleClose();
                }).catch(()=>{
                }).finally(()=>{
                    saveLoading.value = false;
                })
            }else{
                saveLoading.value = false;
            }
        })
    }
    const handleOpen = (_type: string, parentid: string, id: string)=>{
        type.value = _type;
        initForm();
        editDialogRef.value.handleOpen();
        if(type.value === 'edit'){
            loading.value = true;
            request.get(`/system/department/${id}`).then((res)=>{
                formData.value = {
                    ...formData.value,
                    ...res.data
                };
                loading.value = false;
            })
        }else{
            formData.value.parentid = parentid;
        }
        
    }

    // 选择人员
    const vpUserDialogRef = ref();
    const handleSearchUser = ()=>{
        vpUserDialogRef.value.handleOpen({
            type: 1, // 1、选择人员t_user 2、选择档案b_p3_001
            multi: false,    // 是否多选
            selected: formData.value.fzrid, // 默认选中人员id
            bmid: formData.value.id || '-',
            callback: (data: any) => {
                formData.value.fzrid = data.yhid;
                formData.value.fzrxm = data.xm;
            }
        });
    }

    defineExpose({
        handleOpen,
    })

</script>
